<template>
	<div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">注册用户</h1>
      <el-form-item label="登录账号: " prop="username">
        <el-input v-model="username" placeholder="请输入登录账号"></el-input>
      </el-form-item>
      <el-form-item label="登录密码: " prop="password">
        <el-input v-model="password" type="password" placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <el-form-item label="手机号: " prop="phone">
        <el-input v-model="phone" placeholder="请输入手机号">
          <template slot="prepend">+86</template>
        </el-input>
      </el-form-item>
      <el-form-item label="姓名: " prop="nickName">
        <el-input v-model="nickName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄: " prop="age">
        <el-input v-model.number="age" type="number" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="性别: " prop="sex">
        <el-radio-group v-model="sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoLogin">前往登录</el-link>
      </el-row>
    </el-form>
  </div>
  </template>
   
  <script>
	export default {
	  name: 'Registered',
	  data() {
		return {
		  username: "",
		  password: "",
		  phone: "",
		  nickName: "",
		  age: "",
		  sex: ""
		}
	  },
	  methods: {
		gotoLogin() {
		  this.$router.push('/')
		},
		//注册
		doSubmit() {
		let data = {
		userName: this.username,
		password: this.password,
		phone: this.phone,
		nickName: this.nickName,
		age: this.age,
		sex: this.sex
		};

		// 设置请求头为 application/json
		let config = {
		headers: {
			'Content-Type': 'application/json'
		}
		};
		// 发送 POST 请求
		this.$axios.post('/user/register', JSON.stringify(data), config)
		.then(response => {
			// 处理成功响应
			if(response.data.success){
				this.$message({
					message:'注册成功',
					type: 'success'
				});
				this.gotoLogin();
			}else{
				this.$message.error(response.data.msg);
			}
		})
		.catch(error => {
			// 处理错误
			console.error("请求错误:", error);
		});
	}
	  }
	}
  </script>
   
  <style scoped>
	.login-wrap {
	  box-sizing: border-box;
	  width: 100%;
	  height: 100%;
	  padding-top: 10%;
	  background-image: url();
	  /* background-color: #112346; */
	  background-repeat: no-repeat;
	  background-position: center right;
	  background-size: 100%;
	}
   
	.login-container {
	  border-radius: 10px;
	  margin: 0px auto;
	  width: 350px;
	  padding: 30px 35px 15px 35px;
	  background: #fff;
	  border: 1px solid #eaeaea;
	  text-align: left;
	  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	  margin: -150px auto 0 auto;
	}
   
	.title {
	  margin: 0px auto 40px auto;
	  text-align: center;
	  color: #505458;
	}
  </style>